<template>
  <!-- <div id="app">
   <router-link to="/vue">加载vue</router-link>
   子应用加载在当前元素中，根据id来查找元素
   <div id="vue"></div>
  </div>-->
  <div id="app">
    <div class="operation">
      <div>
        <a-switch @change="isolateComponents" />
        <span>构件隔离</span>
      </div>
      <div>
        <a-switch @change="zoomToSelectedComponents" />
        <span>构件定位</span>
      </div>
      <div>
        <a-switch @change="overrideComponents" />
        <span>构件着色</span>
      </div>
      <div>
        <a-switch @change="blinkComponents" />
        <span>构件强调</span>
      </div>
      <div>
        <a-switch @change="startAutoRotate" />
        <span>场景旋转</span>
      </div>
      <div>
        <a-switch @change="label.addCustomTag" />
        <span>放置标签点</span>
      </div>
      <div>
        <a-switch @change="room.showOrHideRoom" />
        <span>创建房间</span>
      </div>
      <div>
        <a-switch @change="explosion" />
        <span>开启爆炸</span>
      </div>
      <div>
        <a-switch @change="light.showOrHideLight" />
        <span>开启光照</span>
      </div>
      <div>
        <a-switch @change="snowEffect" />
        <span>开启雪景</span>
      </div>
      <div>
        <a-switch @change="addPlane" />
        <span>开启贴图</span>
      </div>
      <div>
        <a-switch @change="setAmapSatellite" />
        <span>开启地图</span>
      </div>
      <div>
        <a-switch @change="addExternalObject" />
        <span>外部构件</span>
      </div>
      <div>
        <a-switch @change="playAnimation" />
        <span>构件动画</span>
      </div>
      <div class="state">
        <a-button @click="state.saveCurrentState" type="primary">保存状态</a-button>
        <a-button @click="state.restoreState" type="primary">恢复状态</a-button>
      </div>

      <div class="keyframes">
        <a-button @click="keyFrame.addKeyFrame" type="primary">添加关键帧</a-button>
        <a-button @click="keyFrame.playWalkThrough" type="primary">播放关键帧</a-button>
      </div>
      <div class="mark">
        <a-button @click="mark.drawAnnotation" type="primary">开始标注</a-button>
        <a-button @click="mark.restoreAnnotation" type="primary">显示标注</a-button>
      </div>
    </div>
    <div class="dom4Show" ref="dom4Show"></div>
  </div>
</template>
<script>
// 路径曲线的构造函数
var extObjMng;
var curve;
function createCurve() {
  var curvePt = new THREE.Vector3(-95046.811, 62413.156, 0);
  var curvePt0 = new THREE.Vector3(-45046.811, 62413.156, 0);
  var curvePt1 = new THREE.Vector3(-45046.948, 44909.947, 0);
  var curvePt2 = new THREE.Vector3(-45046.101, 38464.856, 0);
  var curvePt3 = new THREE.Vector3(-45046.623, 34197.133, 0);
  var curvePt4 = new THREE.Vector3(-45046.462, 29556.482, 0);
  var curvePt5 = new THREE.Vector3(-45046.892, 24154.826, 0);
  var curvePt6 = new THREE.Vector3(-45046.754, 12593.307, 0);
  var curvePt7 = new THREE.Vector3(-36076.755, 4972.386, 0);
  var curvePt8 = new THREE.Vector3(-24992.013, 3658.454, 0);
  var curvePt9 = new THREE.Vector3(-19386.675, 7334.062, 0);
  var curvePt10 = new THREE.Vector3(-16320.86, 11763.684, 0);
  curve = new THREE.CatmullRomCurve3([
    curvePt,
    curvePt0,
    curvePt1,
    curvePt2,
    curvePt3,
    curvePt4,
    curvePt5,
    curvePt6,
    curvePt7,
    curvePt8,
    curvePt9,
    curvePt10,
  ]);
  // 若不显示路径，可仅返回样条曲线对象
  var divPts = curve.getPoints(200);
  var geometry = new THREE.Geometry();
  geometry.vertices = divPts;
  var material = new THREE.LineBasicMaterial({
    color: 0x32d3a6,
  });
  return new THREE.Line(geometry, material);
}
export default {
  name: "parent-app",
  data() {
    return {
      state: {},
      keyFrame: {},
      mark: {},
      label: {},
      room: {},
      light: {},
      viewToken: "d0c65baa9fc846d28cb72073fcee9fa0",
      viewer3D: null,
      app: null,
    };
  },
  created() {
    this.state = this.createStateManagement();
    this.keyFrame = this.createKeyFrame();
    this.mark = this.createMark();
    this.label = this.createCustomLabel();
    this.room = this.createRoom();
    this.light = this.createLight();
  },
  mounted() {
    this.load();
  },
  methods: {
    /** 初始加载 */
    load() {
      let callback = {
        successCallback: (viewMetaData) => {
          console.log("successCallback");
          /** 简易模式的容器加载方式 */
          // new Glodon.Bimface.Application.WebApplicationDemo(viewMetaData, this.$refs.dom4Show);
          /** 模型加载容器 */
          //创建WebApplication3DConfig
          let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
          //设置创建WebApplication3DConfig的dom元素值
          webAppConfig.domElement = this.$refs.dom4Show;
          //是否开启爆炸效果，还需设置爆炸点位数据
          webAppConfig.enableExplosion = true;
          //是否开启光照效果
          webAppConfig.enableIBLBackground = true;
          //是否设置背景默认为全透明
          // webAppConfig.backgroundColor = [{
          //     color: new Glodon.Web.Graphics.Color(25, 28, 33, 0)
          // }]
          //创建WebApplication3D
          this.app = new Glodon.Bimface.Application.WebApplication3D(
            webAppConfig
          );
          // setTimeout(()=>{
          // this.app.destroy(this.viewToken)
          // },1000)
          //添加待显示的模型
          this.app.addView(this.viewToken);
          //获取viewer3D对象
          this.viewer3D = this.app.getViewer();
          console.log("this.viewer3D", this.viewer3D);

          // 监听点击事件，获取点击的构件信息
          this.viewer3D.addEventListener(
            Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked,
            (componentData) => {
              console.log("componentData", componentData);
              console.log(
                "webAppConfig=========",
                this.viewer3D.getCameraStatus()
              );
              if (componentData && componentData.objectId) {
                console.log("componentData.objectId", componentData.objectId);
              }
            }
          );
          //   this.viewer3D.showExclusiveComponentsByObjectData([{"levelname":"F1"}]);

          //添加模型加载完成事件
          this.viewer3D.addEventListener("ViewAdded", () => {
            //  //获取自己想要的视角信息
            //  var camera ='{"name":"persp","position":{"x":191154,"y":-113135,"z":16625},"target":{"x":79237.87092923152,"y":-2387.864388222445,"z":-6817.044442151024},"up":{"x":0,"y":-0.000003673205209225767,"z":0.9999999999932537},"version":1}';
            //  //设置视角
            // this.viewer3D.setCameraStatus(JSON.parse(camera));
            // 给指定构件着色
            let color2 = new Glodon.Web.Graphics.Color("#498e28", 0.9);
            this.viewer3D.overrideComponentsColorById(["307240"], color2);
            let color3 = new Glodon.Web.Graphics.Color("#777b7d", 0.9);
            this.viewer3D.overrideComponentsColorById(["308366"], color3);

            // ------------------------------------------------------
            // 调用viewer3D对象的Method，可以继续扩展功能
            //自适应屏幕大小
            // document.querySelector('.bf-view').style.background =
            //     "url('http://static.bimface.com/attach/aa1903ceb8be4406b91f7a9817bfd446_%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190417161941.jpg')";
            // document.querySelector('.bf-view').style.backgroundSize = "cover";
            // window.onresize = function () {
            //     viewer3D.resize(document.documentElement.clientWidth, document.documentElement
            //         .clientHeight );
            // }

            //手动render()
            this.viewer3D.render();
          });
        },
        failureCallback: () => {
          console.log("failureCallback");
        },
      };
      let loaderConfig = new BimfaceSDKLoaderConfig();
      loaderConfig.viewToken = this.viewToken;
      // 加载BIMFACE JSSDK加载器
      BimfaceSDKLoader.load(
        loaderConfig,
        callback.successCallback,
        callback.failureCallback
      );
    },

    /** 构件隔离 */
    isolateComponents(flag) {
      console.log("flag", flag);
      if (flag) {
        // 设置隔离选项，指定其他构件为半透明状态
        let makeOthersTranslucent =
          Glodon.Bimface.Viewer.IsolateOption.MakeOthersTranslucent;
        // 调用viewer3D.method，隔离楼层为"F2"的构件
        this.viewer3D.isolateComponentsByObjectData(
          [{ levelName: "过厅 18" }],
          makeOthersTranslucent
        );
        // 渲染三维模型
        this.viewer3D.render();
      } else {
        // 清除隔离
        this.viewer3D.clearIsolation();
        // 渲染三维模型
        this.viewer3D.render();
      }
    },

    /** 构件定位 */
    zoomToSelectedComponents(flag) {
      if (flag) {
        // 选中id为"271431"的构件
        this.viewer3D.addSelectedComponentsById(["389601"]);
        // 定位到选中的构件
        this.viewer3D.zoomToSelectedComponents();
        // 清除构件选中状态
        this.viewer3D.clearSelectedComponents();
      } else {
        // 切换至主视角
        this.viewer3D.setView(Glodon.Bimface.Viewer.ViewOption.Home);
      }
    },

    /** 构件着色 */
    overrideComponents(flag) {
      if (flag) {
        // 新建color对象，指定关注构件被染色的数值
        let color = new Glodon.Web.Graphics.Color("#11DAB7", 0.5);
        // 对关注构件进行着色
        this.viewer3D.overrideComponentsColorById(["389601"], color);

        this.viewer3D.render();
      } else {
        // 清除构件着色
        this.viewer3D.clearOverrideColorComponents();
        // 给指定构件着色
        let color2 = new Glodon.Web.Graphics.Color("#498e28", 0.9);
        this.viewer3D.overrideComponentsColorById(["307240"], color2);
        let color3 = new Glodon.Web.Graphics.Color("#777b7d", 0.9);
        this.viewer3D.overrideComponentsColorById(["308366"], color3);
        this.viewer3D.render();
      }
    },

    /** 构件强调 */
    blinkComponents(flag) {
      if (flag) {
        //设置闪烁的颜色
        let blinkColor = new Glodon.Web.Graphics.Color("#B22222", 0.8);
        // 打开构件强调开关
        this.viewer3D.enableBlinkComponents(true);
        // 给需要报警的构件添加强调状态
        this.viewer3D.addBlinkComponentsById(["389617"]);
        // 设置强调状态下的颜色
        this.viewer3D.setBlinkColor(blinkColor);
        // 设置强调状态下的频率
        this.viewer3D.setBlinkIntervalTime(500);
        this.viewer3D.render();
      } else {
        // 清除构件强调
        this.viewer3D.clearAllBlinkComponents();
        this.viewer3D.render();
      }
    },
    /** 开启地图 */
    setAmapSatellite(flag) {
      let mapConfig = new Glodon.Bimface.Plugins.TileMap.MapConfig();
      mapConfig.viewer = this.viewer3D;
      mapConfig.enableElevationModel = true;
      // 设置模型载入的基点
      mapConfig.basePoint = {
        x: -85689.088,
        y: -62066.347,
      };
      // 设置模型载入基点所对应的经纬度（WGS84）
      mapConfig.modelPosition = [121.404834, 31.172729];
      // 设置模型的旋转弧度值
      mapConfig.modelRotationZ = (0 * Math.PI) / 180;
      // 设置模型零零标高对应的高程值，单位为米
      mapConfig.modelAltitude = 6.3;
      // 构造地图对象
      let map = new Glodon.Bimface.Plugins.TileMap.Map(mapConfig);
      map.setMapSource({
        // credit: Glodon.Bimface.Common.Credit.Amap,
        url:
          "https://webst01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}",
      });
      if (flag) {
        console.log("===========", map.getMapSource());
        // 设置地图类型为高德的卫星影像
        map.show();
      } else {
        map.hide();
      }
      this.viewer3D.render();
    },
    /** 添加外部构件 */
    addExternalObject(flag) {
      //创建外部元素容器
      var containerConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
      containerConfig.viewer = this.viewer3D;
      let drawableContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(
        containerConfig
      );
      if (flag) {
        var pathCurve = createCurve();
        extObjMng = new Glodon.Bimface.Plugins.ExternalObject.ExternalObjectManager(
          this.viewer3D
        );
        extObjMng.addObject("pathCurve", pathCurve);
        var objUrl = {
          url:
            "https://static.bimface.com/attach/6db9d5bcf88640f997b23be61e870ee8_%E6%B1%BD%E8%BD%A6.3DS",
        };
        extObjMng.addObjectByUrl("vehicle", objUrl, () => {
          console.log("vehicle is added");
          let extObjId = extObjMng.getObjectIdByName("vehicle");

          // 将构件移至初始位置
          extObjMng.translate(
            extObjMng.getObjectIdByName("vehicle"),
            curve.getPointAt(0)
          );
        });
        // 手动更新场景包围盒，确保外部构件在相机显示范围内
        this.viewer3D.updateSceneBoundingBox();
      } else {
      }
      this.viewer3D.render();
    },
    /** 播放构件动画 */
    playAnimation(flag) {
      var pathAnimationConfig = new Glodon.Bimface.Plugins.Animation.PathAnimationConfig();
      pathAnimationConfig.viewer = this.viewer3D;
      pathAnimationConfig.path = curve;
      pathAnimationConfig.time = 8000;
      pathAnimationConfig.loop = true;
      pathAnimationConfig.objectNames = [
        extObjMng.getObjectIdByName("vehicle"),
      ];
      pathAnimationConfig.isPitchEnabled = true;
      pathAnimationConfig.isYawEnabled = true;
      pathAnimationConfig.originYaw = 0.5 * Math.PI;
      let pathAnimation = new Glodon.Bimface.Plugins.Animation.PathAnimation(
        pathAnimationConfig
      );
      if (flag) {
        pathAnimation.play();
      } else {
        pathAnimation.pause();
      }
    },

    /** 模型爆炸 */
    explosion(flag) {
      if (flag) {
        this.viewer3D.setExplosionExtent(1.6);
        this.viewer3D.setCameraStatus({
          name: "persp",
          position: {
            x: -67367.78021181293,
            y: -55632.2794252271,
            z: 35030.41632196075,
          },
          target: {
            x: -60248.36214519279,
            y: -50812.09982102612,
            z: 31032.46269926138,
          },
          up: {
            x: 0.349149451401335,
            y: 0.23639048943542185,
            z: 0.9067602754259964,
          },
          fov: 45,
          zoom: 1,
          version: 1,
        });
        this.viewer3D.render();
      } else {
        this.viewer3D.setExplosionExtent(0);
        this.viewer3D.setCameraStatus({
          name: "persp",
          position: {
            x: -37561.42146101631,
            y: -38760.42344735461,
            z: 43573.66156623967,
          },
          target: {
            x: -447.738276992965,
            y: -1646.7382655930417,
            z: 6459.97845420441,
          },
          up: { x: 0, y: -4.371135405946448e-8, z: 0.999999999999999 },
          fov: 45,
          zoom: 1,
          version: 1,
        });
        this.viewer3D.render();
      }
    },

    /** 光照 */
    createLight() {
      let lightMng = null,
        directionalLight = null,
        date = null,
        latLon = null,
        t = null,
        isInitial = false;
      let light = () => {
        // 设置初始相机视角
        this.viewer3D.setCameraStatus({
          name: "persp",
          position: {
            x: -37561.42146101631,
            y: -38760.42344735461,
            z: 43573.66156623967,
          },
          target: {
            x: -447.738276992965,
            y: -1646.7382655930417,
            z: 6459.97845420441,
          },
          up: { x: 0, y: -4.371135405946448e-8, z: 0.999999999999999 },
          fov: 45,
          zoom: 1,
          version: 1,
          coordinateSystem: "world",
        });
        // 获取灯光管理器
        lightMng = this.viewer3D.getLightManager();
        // 获取默认用于控制投影的方向光
        directionalLight = lightMng.getAllDirectionalLights()[0];
        // 设置方向光角度，并开启投影
        date = new Date("2020", "07", "31", "07", "00", "00");
        latLon = {
          lat: 31.0,
          lon: 120.0,
        };
      };
      return {
        showOrHideLight: (flag) => {
          if (flag) {
            if (!isInitial) {
              light();
              isInitial = true;
            }
            directionalLight.setDirectionByCondition(latLon, date);
            directionalLight.enableShadow(true);
            var time = date.getTime();
            t = setInterval(() => {
              // 根据地点与时间设置方向光的方向
              directionalLight.setDirectionByCondition(latLon, date);
              // viewer3D.render();
              // 时间增加0.1H
              date.setTime((time += 1000 * 0.1 * 3600));
              if (date.getHours() > 16) {
                clearInterval(t);
                date.setHours("07");
              }
              this.viewer3D.render();
            }, 100);
          } else {
            clearInterval(t);
            directionalLight.enableShadow(false);
            this.viewer3D.render();
          }
        },
      };
    },
    /**
     * 设置雪景效果
     * darkness {Number} 天空的灰暗程度，取值为0-1，默认值为0.5
     * density {Number} 雪的密度，取值为：雪停:0;小雪:1;中雪:2;大雪:3，默认中雪
     * thickness {Number} 积雪厚度，取值为0~1，默认值为0.8
     */
    snowEffect(flag) {
      let snowConfig = new Glodon.Bimface.Plugins.WeatherEffect.SnowConfig();
      snowConfig.viewer = this.viewer3D;
      snowConfig.darkness = 0.3;
      snowConfig.density = 2;
      snowConfig.thickness = 0.4;
      let snow = new Glodon.Bimface.Plugins.WeatherEffect.Snow(snowConfig);
      if (flag) {
        snow.enableEffect(true);
      } else {
        snow.enableEffect(false);
      }
      this.viewer3D.render();
    },
    /** 贴图 */
    addPlane(flag) {
      if (flag) {
        this.viewer3D.getComponentProperty("307240", (data) => {
          let min = data.boundingBox.min;
          let max = data.boundingBox.max;
          let boundingBoxMin = { x: min.x, y: min.y, z: min.z + 10 };
          let boundingBoxMax = { x: max.x, y: max.y, z: max.z + 10 };
          this.viewer3D.addPlane(
            boundingBoxMin,
            boundingBoxMax,
            "http://static.bimface.com/attach/1c257af511aa4617b30031913d58b79b_timg.jpg",
            () => {
              this.viewer3D.render();
            }
          );
        });
      } else {
        this.viewer3D.clearPlane();
        this.viewer3D.render();
      }
    },

    /** 场景旋转 */
    startAutoRotate(flag) {
      if (flag) {
        // 开始场景旋转
        this.viewer3D.startAutoRotate(5);
      } else {
        // 结束场景旋转
        this.viewer3D.stopAutoRotate();
      }
    },

    /** 放置标签点 */
    createCustomLabel() {
      let callback = (() => {
        let cunstomItemContainer = null;
        //创建标签容器
        let createCustomItemContainer = () => {
          if (!cunstomItemContainer) {
            // 创建标签容器配置
            let drawableContainerConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
            // 设置容器配置匹配的对象
            drawableContainerConfig.viewer = this.viewer3D;
            // 创建标签容器
            cunstomItemContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(
              drawableContainerConfig
            );
          }
        };
        //创建标签
        let addCustomItem = (object) => {
          createCustomItemContainer();
          // 创建CustomItemConfig
          let config = new Glodon.Bimface.Plugins.Drawable.CustomItemConfig();
          let content = document.createElement("div");
          // 自定义样式，支持HTML的任意DOM元素
          // 设置标签的宽度和高度
          content.style.width = "80px";
          content.style.height = "32px";
          // 设置标签样式
          content.style.border = "solid";
          content.style.borderColor = "#FFFFFF";
          content.style.borderWidth = "2px";
          content.style.borderRadius = "5%";
          content.style.background = "#11DAB7";
          // 设置标签文字内容与样式
          content.innerText = "检查点";
          content.style.color = "#FFFFFF";
          content.style.textAlign = "center";
          content.style.lineHeight = "32px";
          // 设置自定义标签配置
          config.content = content;
          config.viewer = this.viewer3D;
          config.worldPosition = object.worldPosition;
          // 创建自定义标签对象
          let customItem = new Glodon.Bimface.Plugins.Drawable.CustomItem(
            config
          );
          // 将自定义标签添加至标签容器内
          cunstomItemContainer.addItem(customItem);
        };
        return {
          addCustomItem,
        };
      })();
      return {
        addCustomTag: (flag) => {
          if (flag) {
            // 创建鼠标点击的监听事件
            this.viewer3D.addEventListener(
              Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked,
              callback.addCustomItem
            );
          } else {
            console.log("1234");
            // 移除鼠标点击的监听事件
            this.viewer3D.removeEventListener(
              Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked,
              callback.addCustomItem
            );
          }
        },
      };
    },

    /** 创建房间并显示隐藏 */
    createRoom() {
      let isRoomCreated = false;
      let roomIds = [];
      // 设置房间颜色为红色
      let setRoomRed = (ids) => {
        // 设置房间线框颜色
        let redColor1 = new Glodon.Web.Graphics.Color(255, 0, 0, 0.8);
        this.viewer3D.setRoomsFrameColorById(ids, redColor1);
        // 设置房间颜色
        let redColor2 = new Glodon.Web.Graphics.Color(255, 0, 0, 0.1);
        this.viewer3D.setRoomsColorById(ids, redColor2);
      };
      //查找对应房间
      let findRoom = () => {
        if (isRoomCreated) return;
        // 获取解析后的房间边界信息，这里要找到名称为“过厅 18”的对象，并创建房间
        this.viewer3D.getAreas((data) => {
          if (data) {
            for (let i = 0; i < data.length; i++) {
              // console.log('data[i].rooms',data[i].rooms);
              if (data[i].rooms) {
                for (let j = 0; j < data[i].rooms.length; j++) {
                  if (data[i].rooms[j].name.indexOf("书房") !== -1) {
                    console.log("data[i].rooms", data[i].rooms[j]);
                    // 获取房间信息和id
                    let roomInfo = data[i].rooms[j];
                    let roomId = "room-" + roomInfo.id;
                    roomIds.push(roomId);
                    // 通过房间边界创建一个3350mm高的房间，并自定义房间id
                    this.viewer3D.createRoom(roomInfo.boundary, 3350, roomId);
                    isRoomCreated = true;
                    setRoomRed(roomIds);
                    this.viewer3D.render();
                  }
                }
              }
            }
          }
        });
      };
      //显示/隐藏房间
      let showOrHideRoom = (flag) => {
        if (!flag) {
          // 根据id隐藏房间
          this.viewer3D.hideRoomsById(roomIds);
          this.viewer3D.render();
        } else {
          findRoom();
          // 根据id显示房间
          this.viewer3D.showRoomsById(roomIds);
          this.viewer3D.render();
        }
      };
      return {
        showOrHideRoom,
      };
    },

    /** 状态 */
    createStateManagement() {
      let state = null;
      return {
        saveCurrentState: () => {
          state = this.viewer3D.getCurrentState();
        },
        restoreState: () => {
          if (state != null) {
            // 恢复模型浏览状态
            this.viewer3D.setState(state);
            this.viewer3D.render();
          } else {
            this.$message.warn("请先保存一个模型浏览状态！");
          }
        },
      };
    },
    /** 关键帧 */
    createKeyFrame() {
      let walkThrough = null;
      let createWalkThrough = () => {
        if (walkThrough == null) {
          // 构造路径漫游配置wtConfig
          let walkThroughConfig = new Glodon.Bimface.Plugins.Walkthrough.WalkthroughConfig();
          // 设置路径漫游配置匹配的viewer对象
          walkThroughConfig.viewer = this.viewer3D;
          // 构造路径漫游对象
          walkThrough = new Glodon.Bimface.Plugins.Walkthrough.Walkthrough(
            walkThroughConfig
          );
        }
      };
      return {
        addKeyFrame: () => {
          createWalkThrough();
          //给漫游对象添加关键帧
          walkThrough.addKeyFrame();
        },
        playWalkThrough: () => {
          if (walkThrough != null) {
            // 设置播放时间为5秒
            walkThrough.setWalkthroughTime(5);
            // 播放路径漫游
            walkThrough.play();
          } else {
            this.$message.warn("请先添加关键帧");
          }
        },
      };
    },

    /** 标注 */
    createMark() {
      let annotationToolbar = null;
      let isDrawAnnotationActivated = false;
      let annotationState = null;
      let callback = (() => {
        //直接退出批注
        let eixtAnnotation = () => {
          // 显示主工具条
          this.app.getToolbar("MainToolbar").show();
          annotationToolbar.getAnnotationManager().exit();
          // 批注的激活状态为false
          isDrawAnnotationActivated = false;
        };
        // 保存批注并退出
        let onAnnotationSaved = () => {
          annotationState = annotationToolbar
            .getAnnotationManager()
            .getCurrentState();
          eixtAnnotation();
        };
        //保存批注退出和直接退出批注
        return {
          onAnnotationSaved,
          eixtAnnotation,
        };
      })();
      let createAnnotationToolbar = () => {
        if (!annotationToolbar) {
          // 创建批注工具条的配置
          let config = new Glodon.Bimface.Plugins.Annotation.AnnotationToolbarConfig();
          config.viewer = this.viewer3D;
          // 创建批注工具条
          annotationToolbar = new Glodon.Bimface.Plugins.Annotation.AnnotationToolbar(
            config
          );
          // 注册批注工具条的监听事件
          annotationToolbar.addEventListener(
            Glodon.Bimface.Plugins.Annotation.AnnotationToolbarEvent.Saved,
            callback.onAnnotationSaved
          );
          annotationToolbar.addEventListener(
            Glodon.Bimface.Plugins.Annotation.AnnotationToolbarEvent.Cancelled,
            callback.eixtAnnotation
          );
        }
      };
      return {
        drawAnnotation: () => {
          // 创建批注工具条
          createAnnotationToolbar();
          //第一次点击
          if (!isDrawAnnotationActivated) {
            // 隐藏主工具条
            this.app.getToolbar("MainToolbar").hide();
            // 显示批注工具条
            annotationToolbar.show();
            // 修改批注的激活状态为true
            isDrawAnnotationActivated = true;
          }
        },
        restoreAnnotation: () => {
          if (annotationState != null) {
            // 恢复批注
            annotationToolbar.getAnnotationManager().setState(annotationState);
          } else {
            this.$message.warn("请先创建批注");
          }
        },
      };
    },
  },
};
</script>
<style lang="scss">
#app {
  height: 100vh;
  position: relative;
  .operation {
    width: 100%;
    height: 60px;
    display: flex;
    justify-items: start;
    align-items: center;
    padding: 0 20px;
    > div {
      display: flex;
      flex-direction: column;
      margin-right: 20px;
      &.state {
        display: flex;
        flex-direction: inherit;
        width: 180px;
        justify-content: space-between;
        align-items: center;
      }
      &.keyframes {
        display: flex;
        flex-direction: inherit;
        width: 208px;
        justify-content: space-between;
        align-items: center;
      }
      &.mark {
        display: flex;
        flex-direction: inherit;
        width: 180px;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  .dom4Show {
    width: 100%;
    height: calc(100% - 60px);
  }
}
</style>
